<template>
  <div class="generationBlog">
    <div class="header">
      <SvgIcon name="左箭头" size="20" @click="back" /><span @click="back">返回</span> <span style="color:#dddddd;">
        |</span><span>博客生成</span><span></span>
      <van-popover v-model:show="showPopover1" :offset="[-35, 10]" :show-arrow="false" :actions="actions1"
        @select="onMicroBlog">
        <template #reference>
          <van-button class="button" type="primary">分享</van-button>
        </template>
      </van-popover>
      <van-popover v-model:show="showPopover2" :offset="[-60, 15]" :show-arrow="false" :actions="actions2"
        @select="downloadWord">
        <template #reference>
          <SvgIcon style="transform: rotate(90deg);" name="更多" :size="20" />
        </template>
      </van-popover>
    </div>
    <div class="card">
      <p class="content" v-html="message"></p>
      <div class="images">
        <img v-for="item in images" :src="item" alt="">
      </div>
    </div>
    <van-overlay :show="loading">
      <van-loading color="#1989fa" size="24"
        style="position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);">
        {{loadingText}}
      </van-loading>
    </van-overlay>
    <van-notify type="success">
      <van-icon name="bell" style="margin-right: 4px;" />
      <span>博客生成失败</span>
    </van-notify>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted } from "vue"
import {GeneratePPT, textPolish,downWord} from '@/api/index'
import { showNotify } from 'vant';
import { usePortStore } from '@/stores/index'
// `http://47.94.1.69:${(getPort() + 1)}/v3/file?token=${ usePortStore().getUserInfo().token.access_token}&path=`
const router = useRouter()
const route = useRoute()
const message = ref()
const blogstr = ref(route.query.message)
const filePath = ref(route.query.filePaths)
const showPopover1 = ref(false)
const showPopover2 = ref(false)
const loading = ref(false)
const images = ref([])
const downloadText = ref('')
const loadingText = ref("生成中...")
const actions1 = ref([
  { text: '分享到微博', icon: './images/微博.svg' },
  { text: '分享到朋友圈', icon: './images/朋友圈.svg' }
]);
const actions2 = ref([
  { text: '下载图片', icon: './images/图片.svg' },
  { text: '下载word', icon: './images/word.svg' }
]);

const downloadWord = async (action) =>{
  console.log(action.text)
  if(action.text === '下载图片' && images.value.length >0){
    images.value.forEach(item =>{
      downloadImg(item)
    })
  }else{
    loadingText.value = "下载中..."
    loading.value = true
    const data = await downWord({
      text: JSON.stringify(downloadText.value),
    })
    // 创建 Blob 对象
    const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });
    // 创建指向该 Blob 的 URL
    const url = window.URL.createObjectURL(blob);
    // 创建 a 元素用于下载
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'generated_doc.docx'); // 设置下载文件名
    document.body.appendChild(link);
    link.click(); // 模拟点击以触发下载
    document.body.removeChild(link); // 下载后移除元素
    window.URL.revokeObjectURL(url); // 释放 URL 对象
    loading.value = false
  }
}

const base64ToBlob = (base64Str, contentType, sliceSize) => {
  contentType = contentType || ''
  sliceSize = sliceSize || 512

  const byteCharacters = atob(base64Str.split(',')[1])
  const byteArrays = []

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize)

    const byteNumbers = new Array(slice.length)
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i)
    }

    const byteArray = new Uint8Array(byteNumbers)
    byteArrays.push(byteArray)
  }

  const blob = new Blob(byteArrays, { type: contentType })
  return blob
}
const downloadImg = (base64Str) =>{
  const blob = base64ToBlob(base64Str, 'image/png')
  const url = URL.createObjectURL(blob)

  const link = document.createElement('a')
  link.href = url
  link.download = '图片' + new Date().getTime()
  document.body.appendChild(link)
  link.click()

  // 清理
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
}
const initData = async () => {
  // if (!blogstr.value) return
  //测试数据
  // message.value = "好的，以下是我对文章的润色：\n\nJavaScript是一种强大的编程语言，它被广泛用于Web开发。JavaScript可以用来创建动态网页，添加交互性，以及处理用户输入。JavaScript的语法简单易学，但是它的功能强大，可以用来实现复杂的任务。\n\nJavaScript是一种解释型语言，这意味着它不需要编译就可以运行。JavaScript代码可以在浏览器中直接运行，也可以在服务器端运行。JavaScript可以与HTML和CSS一起使用，以创建交互式的Web页面。\n\nJavaScript的语法类似于C语言，但是它更加简单。JavaScript的语法包括变量、数据类型、运算符、控制结构、函数和对象等。JavaScript的变量可以用来存储数据，数据类型可以用来描述变量的值。JavaScript的运算符可以用来执行算术运算、比较运算和逻辑运算。JavaScript的控制结构可以用来控制程序的流程。JavaScript的函数可以用来封装代码，以提高代码的复用性。JavaScript的对象可以用来存储和访问数据。\n\nJavaScript的语法简单易学，但是它的功能强大，可以用来实现复杂的任务。JavaScript的语法包括变量、数据类型、运算符、控制结构、函数和对象等。JavaScript的变量可以用来存储数据，数据类型可以用来描述变量的值。JavaScript的运算符可以用来执行算术运算、比较运算和逻辑运算。JavaScript的控制结构可以用来控制程序的流程。JavaScript的函数可以用来封装代码，以提高代码的复用性。JavaScript的对象可以用来存储和访问数据。\n\nJavaScript是一种强大的编程语言，它被广泛用于Web开发。JavaScript可以用来创建动态网页，添加交互性，以及处理用户输入。JavaScript的语法简单易学，但是它的功能强大，可以用来实现复杂的任务。JavaScript的语法包括变量、数据类型、运算符、控制结构、函数和对象等。JavaScript的变量可以用来存储数据，数据类型可以用来描述变量的值。JavaScript的运算符可以用来执行算术运算、比较运算和逻辑运算。JavaScript的控制结构可以用来控制程序的流程。JavaScript的函数可以用来封装代码，以提高代码的复用性。JavaScript的对象可以用来存储和访问数据。"
  try {
    loading.value = true
    var fileList = []
    if (route.query.filePaths != undefined && route.query.filePaths != '') {
      fileList = route.query.filePaths.split(",")
    }
    const { data, code } = await textPolish({
      text: blogstr.value,
      filePaths :fileList,
    })
    if (code === 200) {
      downloadText.value = data.text
      message.value = data.text.replace(/\n/g, "<br/>");
      // initImages()
      if(data.images.length > 0) {
        data.images.forEach((item) => {
          images.value.push("data:image/png;base64," + item)
        })
      }
    }
    loading.value = false
  } catch (error) {
    showNotify({ type: 'danger', message: '博客生成失败' });
    console.log("网络出错！")
  }
}

const onMicroBlog = async (action) => {
  window.location.href = 'https://service.weibo.com/share/share.php?url= ' + message.value.slice(0,100) + '...' + '&type=icon&language=zh_cn&searchPic=true&style=simple%5C';
}
onMounted(() => {
  initData()
})
const back = () => {
  router.push('/Blog')
}
</script>

<style lang="scss" scoped>
.generationBlog {
  padding: 0 16px;
  background: #F5F5F5;
  height: 100%;
  padding-top: 1px;
  overflow: hidden;
  overflow-y: auto;

  .header {
    display: flex;
    font-size: 16px;
    align-items: center;
    color: #191919;
    text-align: center;
    font-weight: 500;
    margin-top: 10px;

    span {
      margin: 0 5px;

      &:nth-child(5) {
        margin-left: auto !important;

      }
    }

    .button {
      width: 80px;
      height: 32px;
      margin-left: auto;

    }

  }

  .card {
    width: 100%;
    background-color: #fff;
    padding: 16px;
    border-radius: 6px;
    margin-top: 30px;

    .content {
      color: #000000;
      font-family: "Microsoft YaHei";
      font-size: 14px;

    }

    .images {
      display: flex;
      justify-content: start;
      align-items: center;
      flex-wrap: wrap;

      img {
        width: 100px;
        height: 100px;
        margin: 1px;
      }
    }
  }
}



:deep(.van-popover__wrapper) {
  // margin-left: auto !important;

}


:deep(.van-popover__action) {
  width: 150px;
}
</style>
